<!doctype html>
<html>
	<head>
		<title>Welcome</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="imagetoolbar" content="no" />
		<meta name="format-detection" content="telephone=no" />
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<style>
			* {
				padding: 0px;
				margin: 0px;
				outline: none;
			}

			article {
				border-top: none;
				display: -webkit-box;
				height: 100%;
				position: relative;
				width: 300px;
				margin: 50px auto 0;
			}

			article>section:nth-child(1) a {
				left: 0px;
				position: absolute;
			}

			article>section:nth-child(2) a {
				left: 101px;
				position: absolute;
			}

			article>section:nth-child(3) a {
				left: 202px;
				position: absolute;
			}

			article>section {
				width: 304px;
				padding: 10px 0;
				position: absolute;
				left: 0px;
			}

			article>section a {
				color: #333;
				text-decoration: none;
				display: block;
				list-style: none;
				-webkit-box-flex: 1;
				font-size: 12px;
				line-height: 30px;
				text-align: center;
				background: #f1f1f1;
				border: 1px solid #ccc;
				width: 100px;
				z-index: 100;
			}

			article>section>section {
				top: 41px;
				position: absolute;
				background: #fff;
				border: 1px solid #ccc;
				border-top: none;
				padding: 10px 0;
			}

			article>section p {
				font: 12px/1.7 simsun;
				padding: 0 10px;
				text-indent: 2em;
			}

			section:target {
				z-index: 99;
			}

			section:target a {
				background: #fff;
				border-bottom: none;
			}
			.tab1-class{
				background: #0000FF;
			}
			.tab2-class{
				background: #00FF00;
			}
		</style>
	</head>
	<body>
		<article>
			<section id="tab1">
				<a href="#tab1">菜单一</a>
				<div class="tab1-class"></div>
			</section>
			<section id="tab2">
				<a href="#tab2">菜单二</a>
				<section class="tab2-class">
					
				</section>
			</section>
			<section id="tab3">
				<a href="#tab3">菜单三</a>
				<section>
					<p>榜妹：#标配问题#从开始运营到现在，拾文化的内容模式经历过几个发展阶段，粉丝出现过几次增长高峰，是哪些原因呢？</p>
					<p>拾文化：拾文化从2012年3月开始运营，现在总共有50万左右关注者，团队不大，12个人，以编辑为主，还有技术一名、设计两名、BD两名，以及打杂的我。</p>
					<p>榜妹：#标配问题#拾文化是哪一天开始运营的？现在有多少关注者？拾文化团队有多少人？大家怎么分工呢？</p>
				</section>
			</section>
		</article>
	</body>
</html>
